// 动效相关的JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // 添加初始动画类
    document.querySelectorAll('.section-heading').forEach(heading => {
        heading.classList.add('animate-on-load');
    });
    
    // 图片悬停效果
    document.querySelectorAll('.section-image img').forEach(img => {
        img.addEventListener('mouseenter', function() {
            this.classList.add('hover-zoom');
        });
        
        img.addEventListener('mouseleave', function() {
            this.classList.remove('hover-zoom');
        });
    });
    
    // 滚动时渐入效果
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1
    };
    
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-in');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);
    
    document.querySelectorAll('.section-content, .section-image, .perks-grid, .welcome-content, .welcome-image').forEach(element => {
        observer.observe(element);
        element.classList.add('animate-ready');
    });
    
    // 为CSS添加动画样式
    const style = document.createElement('style');
    style.textContent = `
        .animate-ready {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }
        
        .animate-in {
            opacity: 1;
            transform: translateY(0);
        }
        
        .animate-on-load {
            animation: fadeIn 1s ease forwards;
        }
        
        .hover-zoom {
            transform: scale(1.03);
            transition: transform 0.3s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .header-scrolled {
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .header-hidden {
            transform: translateY(-100%);
            transition: transform 0.3s ease;
        }
    `;
    document.head.appendChild(style);
});